import React, { useState } from "react";
import TwoQuadrantChart from "./SuperCharts/TwoQuadrantChart";
import CylinderBarChart from "./SuperCharts/CylinderBarChart";
import FourQuadrantChart from "./SuperCharts/FourQuadrantChart";
import BubbleChart from "./SuperCharts/BubbleChart";
import TriangleChart from "./SuperCharts/TriangleChart";
import ScatterHorizontalBarChart from "./SuperCharts/ScatterHorizontalBarChart";
import IntervalBarChart from "./SuperCharts/IntervalBarChart";
import BasicColumnChart from "./SuperCharts/BasicColumnChart";
import RelationalDistributionChart from "./SuperCharts/RelationalDistributionChart";
import ChinaMap from "./SuperCharts/ChinaMap";
import BlueRingChart from "./SuperCharts/BlueRingChart";
import InfoIndex from "./SuperCharts/InfoIndex";
import GaugeChart from "./SuperCharts/Gauge";
import RosePieChart from "./SuperCharts/RosePieChart";
import BasicCylinderChart from "./SuperCharts/BasicCylinderChart";
import HeatMapSelectArea from "./SuperCharts/HeatMapSelectArea";
import BarPointChart from "./SuperCharts/BarPointChart";
import Demo from "./audio/demo";
import "./App.css";

const tempList = [
  { name: "1点赞率点赞率点赞率点赞率点赞率1", value: 0, isUserChecked: false },
  { name: "2点赞率点赞率点赞率点赞率点赞率2", value: 0, isUserChecked: false },
  { name: "3点赞率点赞率点赞率点赞率点赞率3", value: 15, isUserChecked: true },
  { name: "4点赞率点赞率点赞率点赞率点赞率4", value: 30, isUserChecked: true },
  { name: "5点赞率点赞率点赞率点赞率点赞率5", value: 0, isUserChecked: false },
];

function App() {
  const [grapHoverId, setGrapHoverId] = useState<number>(-1);
  const [hoverId, setHoverId] = useState<number>(-1);

  const onChange = (value: any) => {
    console.log("value", value);
  };

  return (
    <div className="App">
      <Demo />
      {/* <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <BarPointChart
        />
      </div> */}
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 100 }}>
        <HeatMapSelectArea
          heatImgRenderWidth={577}
          heatImgRenderHeight={392}
          image={{ height: 643, src: "https://ts1.cn.mm.bing.net/th/id/R-C.2e885441f4e293388449bd1b16a35bad?rik=nJ5U29e5zOlAFA&riu=http%3a%2f%2fimgs.ppt118.com%2fppt%2fbeijing%2fdetail%2f2019%2f07%2f25%2f6000ea25-3.jpg_w800&ehk=f3mg6S1ZZyn00tI4%2brjXA5blRENXR2xrNdiXB8hzziQ%3d&risl=&pid=ImgRaw&r=0", width: 362 }}
          id="pack-like2257"
          title="喜欢的地方"
          tips="提示：点选图片区域，可查看该区域内消费者的评价"
          onChange={onChange}
          data={[
            {
              id: 111,
              xOffset: 66.26,
              yOffset: 107.4,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 88.1,
              yOffset: 237.31,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 100.75,
              yOffset: 384.46,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 27.17,
              yOffset: 57.97,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 20.27,
              yOffset: 184.43,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 36.37,
              yOffset: 321.23,
              width: 95.7,
              height: 63.8,
            },
            {
              id: 111,
              xOffset: 113.61,
              yOffset: 59.63,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 206.15,
              yOffset: 302.68,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 76.81,
              yOffset: 279.83,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 90.37,
              yOffset: 78.63,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 264.39,
              yOffset: 78.64,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 61.65,
              yOffset: 311.46,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 53.17,
              yOffset: 86,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 83.53,
              yOffset: 289.16,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 223.95,
              yOffset: 209.2,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 66.34,
              yOffset: 73.35,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 243.38,
              yOffset: 73.66,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 43.46,
              yOffset: 255.73,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 36.4,
              yOffset: 75.04,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 243.29,
              yOffset: 78.43,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 46.14,
              yOffset: 242.07,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 54.27,
              yOffset: 44.25,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 219.9,
              yOffset: 74.54,
              width: 95.8,
              height: 63.87,
            },
            {
              id: 111,
              xOffset: 52.62,
              yOffset: 190.32,
              width: 95.8,
              height: 63.87,
            },
          ]}
        />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <BasicCylinderChart
          data={[
            { value: 0.22, name: "搞笑段子" },
            { value: 0.2, name: "明星八卦" },
            { value: 0.08, name: "动漫游戏" },
            { value: 0.1, name: "健康养生" },
            { value: 0.12, name: "健康养生2" },
            { value: 0.11, name: "健康养生3" },
            { value: 0.15, name: "健康养生4" },
            { value: 0.19, name: "健康养生5" },
            { value: 0.12, name: "母婴亲子" },
            { value: 0.18, name: "美妆时尚" },
          ]}
        />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <RosePieChart
          data={[
            { value: 0.22, title: "搞笑段子" },
            { value: 0.2, title: "明星八卦" },
            { value: 0.08, title: "动漫游戏" },
            { value: 0.1, title: "健康养生" },
            { value: 0.12, title: "健康养生2" },
            { value: 0.11, title: "健康养生3" },
            { value: 0.15, title: "健康养生4" },
            { value: 0.19, title: "健康养生5" },
            { value: 0.12, title: "母婴亲子" },
            { value: 0.18, title: "美妆时尚" },
          ]}
        />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <GaugeChart value={20} title="科技版文案2.0" />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 100 }}>
        <InfoIndex
          data={[
            {
              content: "金蝉脱壳",
              choiceId: 217229,
              percent: 30.83,
              topStatistics: [
                {
                  content: "No.1",
                  percent: 25,
                  count: 3,
                  sort: 1,
                },
                {
                  content: "No.1",
                  percent: 33.33,
                  count: 4,
                  sort: 1,
                },
                {
                  content: "No.1",
                  percent: 41.67,
                  count: 5,
                  sort: 1,
                },
              ],
            },
            {
              content: "百里挑一",
              choiceId: 217231,
              percent: 20,
              topStatistics: [
                {
                  content: "No.2",
                  percent: 16.67,
                  count: 2,
                  sort: 2,
                },
                {
                  content: "No.3",
                  percent: 16.67,
                  count: 2,
                  sort: 3,
                },
                {
                  content: "No.2",
                  percent: 33.33,
                  count: 4,
                  sort: 2,
                },
              ],
            },
            {
              content: "行尸走肉",
              choiceId: 217227,
              percent: 14.17,
              topStatistics: [
                {
                  content: "No.3",
                  percent: 8.33,
                  count: 1,
                  sort: 3,
                },
                {
                  content: "No.2",
                  percent: 16.67,
                  count: 2,
                  sort: 2,
                },
                {
                  content: "No.4",
                  percent: 25,
                  count: 3,
                  sort: 4,
                },
              ],
            },
            {
              content: "金玉满堂",
              choiceId: 217233,
              percent: 11.67,
              topStatistics: [
                {
                  content: "No.4",
                  percent: 0,
                  count: 0,
                  sort: 4,
                },
                {
                  content: "No.4",
                  percent: 16.67,
                  count: 2,
                  sort: 4,
                },
                {
                  content: "No.3",
                  percent: 33.33,
                  count: 4,
                  sort: 3,
                },
              ],
            },
            {
              content: "背水一战",
              choiceId: 217235,
              percent: 4.17,
              topStatistics: [
                {
                  content: "No.5",
                  percent: 0,
                  count: 0,
                  sort: 5,
                },
                {
                  content: "No.5",
                  percent: 8.33,
                  count: 1,
                  sort: 5,
                },
                {
                  content: "No.5",
                  percent: 8.33,
                  count: 1,
                  sort: 5,
                },
              ],
            },
            {
              content: "霸王别姬",
              choiceId: 217237,
              percent: 4.17,
              topStatistics: [
                {
                  content: "No.6",
                  percent: 0,
                  count: 0,
                  sort: 6,
                },
                {
                  content: "No.6",
                  percent: 8.33,
                  count: 1,
                  sort: 6,
                },
                {
                  content: "No.6",
                  percent: 8.33,
                  count: 1,
                  sort: 6,
                },
              ],
            },
            {
              content: "天上人间",
              choiceId: 217239,
              percent: 0,
              topStatistics: [
                {
                  content: "No.7",
                  percent: 0,
                  count: 0,
                  sort: 7,
                },
                {
                  content: "No.7",
                  percent: 0,
                  count: 0,
                  sort: 7,
                },
                {
                  content: "No.7",
                  percent: 0,
                  count: 0,
                  sort: 7,
                },
              ],
            },
            {
              content: "不吐不快",
              choiceId: 217241,
              percent: 0,
              topStatistics: [
                {
                  content: "No.8",
                  percent: 0,
                  count: 0,
                  sort: 8,
                },
                {
                  content: "No.8",
                  percent: 0,
                  count: 0,
                  sort: 8,
                },
                {
                  content: "No.8",
                  percent: 0,
                  count: 0,
                  sort: 8,
                },
              ],
            },
            {
              content: " 海阔天空",
              choiceId: 217243,
              percent: 0,
              topStatistics: [
                {
                  content: "No.9",
                  percent: 0,
                  count: 0,
                  sort: 9,
                },
                {
                  content: "No.9",
                  percent: 0,
                  count: 0,
                  sort: 9,
                },
                {
                  content: "No.9",
                  percent: 0,
                  count: 0,
                  sort: 9,
                },
              ],
            },
            {
              content: "情非得已",
              choiceId: 217245,
              percent: 0,
              topStatistics: [
                {
                  content: "No.10",
                  percent: 0,
                  count: 0,
                  sort: 10,
                },
                {
                  content: "No.10",
                  percent: 0,
                  count: 0,
                  sort: 10,
                },
                {
                  content: "No.10",
                  percent: 0,
                  count: 0,
                  sort: 10,
                },
              ],
            },
          ]}
        />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <BlueRingChart
          data={[
            { code: 33, label: "50k及以上", color: 4 },
            { code: 11, label: "20k-50k", color: 5 },
            { code: 44, label: "10k-20k", color: 6 },
            { code: 12, label: "10k以下", color: 7 },
          ]}
        />
      </div>
      <div style={{ height: 430, width: 380 }}>
        <ChinaMap
          data={[
            { code: 67, label: "北京市" },
            { code: 11, label: "天津市" },
            { code: 11, label: "上海市" },
            { code: 11, label: "重庆市" },
          ]}
        />
      </div>
      <div
        style={{
          margin: 30,
          height: 381,
          width: "1184px",
          marginBottom: 100,
        }}
      >
        <RelationalDistributionChart
          xMax={600}
          yMax={200}
          legend={[
            { title: "接触的网络媒体类型", color: "#FFB5B5" },
            { title: "观看的内容类型", color: "#98D8F3" },
            { title: "明星类型", color: "#FFDCA6" },
            { title: "KOL风格类别/明星偏好", color: "#A6F2D6" },
          ]}
          points={[
            { x: 100, y: 100, title: "休闲旅行", color: "#FFB5B5", value: 90 },
            { x: -100, y: 100, title: "幽默搞笑", color: "#98D8F3", value: 20 },
            {
              x: -100,
              y: -100,
              title: "穿搭达人",
              color: "#FFDCA6",
              value: 45,
            },
            {
              x: -200,
              y: -100,
              title: "穿搭达人",
              color: "#FFDCA6",
              value: 10,
            },
            { x: 100, y: -100, title: "时尚达人", color: "#A6F2D6", value: 66 },
            { x: 600, y: 0, title: "时尚达人", color: "#A6F2D6", value: 30 },
          ]}
          width={1184}
          title="被创意打动且被产品种草人群"
        />
      </div>
      <div style={{ margin: 30, height: 400, width: 600, marginTop: 300 }}>
        <BasicColumnChart
          data={tempList}
          pillarHeight={16}
          backgroundColor="#f9f9fa"
          showNumberOrPercent={true}
          leftNameDistance={9}
          showXAxisNum={true}
          scaleNum={6}
        />
      </div>
      <div
        style={{
          margin: 30,
          height: 400,
          width: "600px",
          marginLeft: 100,
          marginBottom: 100,
          marginTop: 100,
        }}
      >
        <IntervalBarChart
          unit="%"
          data={[
            {
              title: "西瓜西瓜西西瓜西瓜西西瓜西瓜西",
              highTitle: "最贵",
              highValue: 50,
              lowTitle: "最便宜",
              lowValue: 500,
            },
            {
              title: "苹果",
              highTitle: "最贵",
              highValue: 50,
              lowTitle: "最便宜",
              lowValue: 0,
            },
            {
              title: "葡萄",
              highTitle: "最贵",
              highValue: 15,
              lowTitle: "最便宜",
              lowValue: 200,
            },
            {
              title: "西瓜西瓜西西瓜西瓜西西瓜西瓜西",
              highTitle: "最贵",
              highValue: 50,
              lowTitle: "最便宜",
              lowValue: 500,
            },
            {
              title: "苹果",
              highTitle: "最贵",
              highValue: 50,
              lowTitle: "最便宜",
              lowValue: 0,
            },
            {
              title: "葡萄",
              highTitle: "最贵",
              highValue: 15,
              lowTitle: "最便宜",
              lowValue: 200,
            },
          ]}
          legend={[
            { title: "最喜欢", color: "#5A86FF" },
            { title: "最不喜欢", color: "#DEE7FF" },
          ]}
        />
      </div>
      <div style={{ margin: 30, height: 400, width: "90vw", marginTop: 200 }}>
        <ScatterHorizontalBarChart
          max={137}
          data={[
            {
              title: "吸睛程度",
              value: 56,
              points: [
                { color: "#5A86FF", value: 1 },
                { color: "#F4E553", value: 50 },
                { color: "#FF6464", value: 100 },
              ],
            },
            {
              title: "投入程度",
              value: 26,
              points: [{ color: "#5A86FF", value: 77 }],
            },
            {
              title: "品牌相关度",
              value: 86,
              points: [{ color: "#5A86FF", value: 10 }],
            },
            {
              title: "分享意愿",
              value: 76,
              points: [{ color: "#5A86FF", value: 10 }],
            },
          ]}
          legend={[
            { color: "#5A86FF", text: "科技版文案2.0" },
            { color: "#72D1FF", text: "清新版文案2.0" },
            { color: "#53EAB2", text: "搞笑版文案2.0" },
            { color: "#F4E553", text: "星空版文案2.0" },
            { color: "#FEAE61", text: "文艺版文案2.0" },
            { color: "#FF6464", text: "艺术版文案2.0" },
            { color: "#EEF2FF", text: "Norm" },
          ]}
        />
      </div>
      <div
        style={{
          margin: 30,
          width: 600,
          height: 600,
          marginLeft: 100,
          marginTop: 200,
        }}
      >
        <TriangleChart
          max={100}
          width={600}
          xAxisMinText="最喜欢"
          xAxisMaxText="最不喜欢"
          yAxisMaxText="无感"
          points={[
            {
              x: 20,
              y: 80,
              title: "新一线城市",
              unlineCount: 5,
              lineCount: 10,
            },
            {
              x: 70,
              y: 70,
              title: "情感导师",
            },
            {
              x: 40,
              y: 50,
              title: "生活记录",
            },
          ]}
          tooltip={(itemValue: any) => {
            console.log("itemValue", itemValue);
            return (
              <div>
                <span>最喜欢：{itemValue.unlineCount}</span>
              </div>
            );
          }}
        />
      </div>
      <div style={{ margin: 30, width: 400, height: 800, marginTop: 200 }}>
        <FourQuadrantChart
          legend={[
            { title: "市场一致认可，可做标准化", color: "#F4E553" },
            { title: "挖掘有异议人群的诉求点，寻找市场潜力", color: "#53EAB2" },
            {
              title: "不适合做标准化功能，需要先进性差异化市场",
              color: "#A6B1BF",
            },
            { title: "用户感知度不高，不建议选择", color: "#5A86FF" },
          ]}
          xMax={300}
          yMax={200}
          axisTopText="得分高"
          axisBottomText="认同度高"
          points={[
            { x: 20, y: 20, title: "休闲旅行", color: "#5A86FF" },
            { x: -20, y: 20, title: "幽默搞笑", color: "#A6B1BF" },
            { x: -20, y: -20, title: "穿搭达人", color: "#F4E553" },
            { x: 20, y: -20, title: "时尚达人", color: "#53EAB2" },
          ]}
        />
      </div>
      <div
        style={{
          margin: 30,
          width: 800,
          height: 370,
          backgroundColor: "#c0c4c3",
        }}
      >
        <BubbleChart
          data={Array.from({ length: 6 }, (i, k) => {
            return {
              label: "产品名称" + k,
              value: Math.floor(Math.random() * 100),
              points: Array.from({ length: 4 }, () => {
                return Math.ceil(Math.random() * 10);
              }),
            };
          })}
          labels={["吸睛程度", "投入程度", "品牌关联度"]}
          mainLabel="信息传递指数(%)"
          type="card"
        />
      </div>
      <div
        style={{
          margin: 30,
          width: 800,
          height: 300,
        }}
      >
        <CylinderBarChart
          data={[
            { code: 3, title: "aaa", label: "aaa" },
            { code: 4, title: "bbb", label: "bbb" },
            { code: 6, title: "ccc", label: "ccc" },
            { code: 7, title: "ddd", label: "ddd" },
          ]}
        />
      </div>
      <div
        style={{
          margin: 30,
          width: 800,
          height: 370,
        }}
      >
        <TwoQuadrantChart
          height={370}
          legendVisible={true}
          xTitle="购买意愿"
          yTitle="喜好程度"
          hoverId={hoverId}
          legend={[
            {
              title: "市场一致认可，可做标准化",
              color: "#F4E553",
              type: "round",
            },
            {
              title: "挖掘有异议人群的诉求点，寻找市场潜力",
              color: "#53EAB2",
              type: "round",
            },
            {
              title: "不适合做标准化功能，需要先进性差异化市场",
              color: "#A6B1BF",
              type: "round",
            },
            {
              title: "用户感知度不高，不建议选择",
              color: "#5A86FF",
              type: "round",
            },
          ]}
          onMouseEnter={(id) => {
            setGrapHoverId(id);
          }}
          onMouseLeave={(id) => {
            setGrapHoverId(-1);
          }}
          points={[
            {
              title: "aaa",
              color: "#ff0000",
              x: 25,
              y: 25,
            },
            {
              title: "bbb",
              color: "#ffffff",
              x: 35,
              y: 55,
            },
            {
              title: "ccc",
              color: "#ffff00",
              x: 75,
              y: 10,
            },
          ]}
        />
      </div>
    </div>
  );
}

export default App;
